<template>
	<view class="phone-code-page">

		<u-navbar :safeAreaInsetTop="true" leftIcon="" bgColor="transparent" :placeholder="true">

			<view class="navbar-right" slot="right">
				<view class="flex-no-horizontal">
					<image src="../../static/chahao.png" class="phone-image" @click="toWechatLogin"></image>
				</view>
			</view>

		</u-navbar>

		<view class="phone-code-title">
			<text>手机关联绑定</text>
			<text>将您的账号与手机号关联，便于后续找回账号，避免信息不同步损失</text>
		</view>
		<view class="phone-code-number">
			<view class="phone-code-number-right">
				<u--input placeholder="请输入国内手机号" placeholderStyle="color: #CDCDCE;" clearable border="none" v-model="phone" type="number" :maxlength="11"></u--input>
			</view>
		</view>
		<view class="code-input-box flex-no-horizontal">
			<u--input type="number" placeholder="请输入验证码" v-model="code" maxlength="4" border="none" placeholderStyle="color: #CDCDCE;font-size: 32rpx"/>
			<view class="get-code">
				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
				<button @tap="getCode" class="code-button" :class="{'code-button-hover':phone !== ''}">{{tips}}</button>
			</view>
		</view>


		<view class="finsh-button">
			<u-button text="完成绑定" class="button-yes" @click="confirm"></u-button>
			<text>若手机号已注册则自动绑定同步原手机号信息，未注册手机号将自动注册</text>
		</view>


	</view>
</template>

<script>
	import {
		userLoginApi,
		userRegisterApi,
		sendMsgApi
	} from '../../api/index.js'
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				tips: '',
				value: '',
				phone: '',
				code: '',
				unionId:'',
				seconds: 59
			}
		},
		watch: {
			value(newValue, oldValue) {
				console.log('v-model', newValue);
			}
		},
		onLoad(e) {
			this.unionId = e.unionId || ''
		},
		methods: {

			...mapMutations(['setUserInfo','setUserToken']),

			codeChange(text) {
				this.tips = text;
			},

			//获取验证码
			async getCode() {
				try{
					if(this.phone === ''){
						uni.showToast({
							title: '请输入手机号',
							icon: 'none'
						})
						return
					}

					if(this.phone.length < 11){
						uni.showToast({
							title: '请输入正确的手机号码',
							icon: 'none'
						})
						return
					}

					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						const res = await sendMsgApi({
							account: this.phone,
						})
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.showToast({
							title: '验证码已发送',
							icon: 'none'
						})
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
			},

			end() {

			},
			start() {

			},

			//绑定点击
			async confirm(){
				try{

					if(this.phone === ''){
						uni.showToast({
							title: '请填写手机号',
							icon: 'none'
						})
						return
					}

					if(this.code === ''){
						uni.showToast({
							title: '请填写验证码',
							icon: 'none'
						})
						return
					}

					if(this.phone.length < 11){
						uni.showToast({
							title: '请输入正确的手机号码',
							icon: 'none'
						})
						return
					}

					uni.showLoading({
						title: '正在登录',
						mask:true
					})

					//注册
					const registerRes = await userRegisterApi({
						code:this.code,
						unionId:this.unionId,
						mobile:this.phone,
						registerType:'wx',
						plate:plus.os.name === 'Android' ? 'Android' : 'MacWx'
					})
					//登录请求
					const loginRes = await userLoginApi({
						unionId:this.unionId,
						loginType:'wx'
					})

					//缓存用户信息
					this.setUserInfo(loginRes.data.userInfo)
					this.setUserToken('Bearer ' + loginRes.data.token)
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '../ring/index'
						})
					}, 1000);
				}catch(e){
					uni.hideLoading()
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
			},

			change(e) {
				console.log('change', e);
			},
			toWechatLogin() {
				uni.navigateBack()
			},
		}
	}
</script>
<style lang="scss" scoped>
	.phone-code-page {
		padding: 0 40rpx;
		height: 100vh;
		background: url(@/static/img/login-bg.png) no-repeat;
		background-size: contain;

		.phone-image {
			width: 56rpx;
			height: 56rpx;
		}

		.phone-code-title {

			text:nth-of-type(1),
			text:nth-of-type(2) {
				display: block;
			}

			text:nth-of-type(1) {
				font-size: 56rpx;
				font-family: PingFang SC;
				font-weight: 800;
				padding-top: 141rpx;
				margin-bottom: 39rpx;
			}

			text:nth-of-type(2) {
				margin-bottom: 94rpx;
				line-height: 46rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.7);
			}

		}

		.phone-code-number {
			display: flex;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			padding-bottom: 35rpx;

			.phone-code-number-left {
				display: flex;
				align-items: center;
			}

			.triangle {
				width: 0;
				height: 0;
				border-right: 10rpx solid transparent;
				border-left: 10rpx solid transparent;
				border-top: 10rpx solid #515151;
				margin: 0 30rpx 0 8rpx;
			}

			.phone-code-number-right {

			}

			::v-deep .input-placeholder {
				font-size: 36rpx;
			}
		}

		.code-input-box{
			margin-top: 20rpx;
			padding: 20rpx 0;
			justify-content: space-between;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

			.get-code{

				.code-button{
					border-radius: 10rpx;
					background-color: transparent;
					color: rgb(192, 196, 204);
					height: 68rpx;
					font-size: 26rpx;
				}

				.code-button-hover{
					border: 2rpx solid rgba(0, 0, 0,1);
					color: $uni-color-black;
				}

			}

		}

		.finsh-button {
			.button-yes {
				height: 98rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background-color: rgba(23, 23, 23, 0.15);
				// opacity: 0.15;
				border-radius: 58px;
				margin: 101rpx 0 47rpx 0;
			}

			&>text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.5);
			}
		}


	}
</style>
